<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> replace </title>
</head>
<style>
.red {
	font-size: 32px;
	font-weight: bold;
	color: red;
}
</style>
<body>

	<input type="text" id="keyword" value="奢侈"/>
	<a href="javascript:void(0);" onclick="searchKeywords(this)">搜索</a>

	<h2>你一共匹配到:<span id="snum"></span>个关键字.</h2>

	<div id="text">第五大道于近日完成了首轮融资，这家成立七年的奢侈品电商，现在开始向技术提供商和服务提供商转型。在与CEO孙亚菲对话中，她用了“B2C模式就是错误的” “这个行业快被价格战搞死了” 来表述奢侈品电商行业现状。</div>
	<div id="statistics"></div>

<script>

const oldHtml = document.getElementById("text").innerHTML;
/**
*@Description
*@Return 搜索事件 监听.
**/
const searchKeywords = () => {
	const textDom = document.getElementById("text");
	const key = document.getElementById("keyword").value;

	if(!key){
		textDom.innerHTML = oldHtml;
		return;
	}

	const rtext = "<span class='red'>" + key + "</span>";
	// string.replace(替换的关键词或regex表达式或者正则对象new RegExp,替换内容); regex表达式: 不允许掺杂变量 new RegExp
	const reg = new RegExp(key, "igm"); 
	const html = oldHtml.replace(reg, rtext);
	// search是找到第一个元素匹配的位置。
	const skeys = oldHtml.match(reg);

	document.getElementById("snum").innerHTML = skeys.length;
	textDom.innerHTML = html;
}

/**
*@Description
*@Return 统计字符中数字有多少个，中文多少个，标点符号有多少，字母有多少个.
**/
let numCount = 0; // 数字
let letterCount = 0; // 字母
let chinsesCount = 0;
let chinsesCount1 = 0;
let punctuationCount = 0; // 标点

const str = "123456789,,,中中中abA";
const len = str.length;

for(let i = 0; i < len; i++){
	const code = str.charCodeAt(i);
	const s = str.charAt(i);

	if(code >= 48 && code <= 57){ // 数字
		numCount ++;
	} else if ((code >=97 && code <= 122)||(code >= 65 && code <= 90)){ // 大写字母和小写字母的分别：a 97 z 122、A 65 Z 90 
		letterCount ++;
	} else if (code > 127){ // 中文
		chinsesCount ++;
	} else { //标点符号
		punctuationCount ++;	
	}

	if(/^[\u2E80-\u9FFF]+$/.test(s)) {// 中文
		console.log("中文------------", i)
		chinsesCount1 ++
	}
}

document.getElementById("statistics").innerHTML = "当前字符中：数字有【" + numCount + "】个，字母有：【" + letterCount + "】个，标点符号有:【" + punctuationCount + "】，中文有【" + chinsesCount + "】个" + `${chinsesCount1}`;

</script>
</body>
</html>
